<template>
    <div class="home-wrapper">
        <project-menu :detail="projectDetail" :pid="projectId"></project-menu>
        <div class="filters-wrapper">
            <div class="title total_title">
                <span>创意包<font class="total_title_back" @click="$router.go(-1)">/ 返回上一级</font></span>
                <router-link v-if="projectDetail.status == 1" :to="{path:'/newcreative/' + projectId + '/0'}"><el-button class="fr" type="primary" size="small">新建创意包</el-button>
            </router-link>
            </div>
            <el-row type="flex" justify="start" align="middle">
                <div class="form-wrapper" style="width: 300px;margin: 0 15px 0;">
                    <el-input placeholder="请输入创意包名称" size="small" v-model="jd_search" class="input-with-select">
                        <el-button @click="loadCreative({})" slot="append" icon="el-icon-search"></el-button>
                    </el-input>
                </div>
                <el-button v-if="projectDetail.status == 1" size="small" @click="toggleSelection(creativedata)">全选</el-button>
                <el-button v-if="projectDetail.status == 1" size="small" type="danger" @click="deleteSelectClick()">删除</el-button>
            </el-row>
            <el-table :data="creativedata" border
                :header-cell-style="{'text-align':'center','background':'#f7f7f7','color':'#666'}"
                style="width: 100%;margin-top: 10px" @selection-change="handleSelectionChange" ref="multipleTable">
                <el-table-column type="selection" width="55" align="center">
                </el-table-column>
                <el-table-column prop="creative_name" label="创意包名称" align="center">
                </el-table-column>
                <el-table-column prop="creative_describe" label="创意包描述" align="center">
                </el-table-column>
                <el-table-column prop="creative_time" label="添加时间" align="center">
                </el-table-column>
                <el-table-column prop="operation" width="300" label="操作" align="center">
                    <template slot-scope="scope">
                        <el-button v-if="projectDetail.status == 1" @click="modify(scope.row)" size="mini" type="primary">修改</el-button>
                        <el-button v-if="projectDetail.status == 1" style="margin-left: 5px;" size="mini" type="danger" @click="deleteClick([scope.row])">删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-row type="flex" justify="end" style="margin-top: 20px;">
                <el-pagination background layout="prev, pager, next" :total="total" :page-size="pageSize" @current-change="handleCurrentChange($event)">
                </el-pagination>
            </el-row>
        </div>
    </div>
</template>

<script>
import { pageParams } from '@/settings'
    export default {
        data() {
            return {
                projectId: 0,
                projectDetail: {},
                pageSize: pageParams.pageSize,
                total: 0,
                jd_search:'',
                creativedata: [],
                multipleSelection: []
            }
        },
        created() {
            this.projectId = this.$router.currentRoute.params.id
        },
        mounted() {
            this.loadData()
        },
        methods: {
            loadData() {
                this.$axios.get('/project/detail', {
                        projectid: this.projectId
                    })
                    .then(e => {
                        this.projectDetail = e.data
                    })
                    this.loadCreative({})
            },
            loadCreative(param) {
                param['number'] = this.pageSize
                param['projectid'] = this.projectId
                param['keyword'] = this.jd_search
                this.$axios.get('/creative/list', param)
                .then(e => {
                    e.data.items.forEach((ele) => {
                        ele.checked = false
                    })
                    this.creativedata = e.data.items
                    this.total = e.data.total
                })
            },
            handleCurrentChange(val) {
                this.loadCreative({page: val})
            },
            toggleSelection(rows) {
                if (rows) {
                    rows.forEach(row => {
                        this.$refs.multipleTable.toggleRowSelection(row)
                    });
                } else {
                    this.$refs.multipleTable.clearSelection()
                }
            },
            modify(item) {
                // {path:'/newcreative/' + projectId + '/' + scope.row.id}
                this.$router.push({path:'/newcreative/' + this.projectId + '/' + item.id})
            },
            handleSelectionChange(val) {
                this.multipleSelection = val;
            },
            deleteSelectClick() {
                if (this.multipleSelection.length <= 0) {
                    this.$message({
                        type: 'error',
                        message: '没有选中项!'
                    })
                    return
                }
                this.deleteClick(this.multipleSelection)
            },
            deleteClick(items) {
                let ids = []
                items.forEach((ele) => {
                    ids.push(ele.id)
                })
                this.$confirm('此操作将删除该项, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$axios.post('/creative/delete', {ids: ids})
                    .then(() => {
                        this.$message({
                            type: 'success',
                            message: '删除成功!'
                        })
                        this.loadCreative({})
                    })
                    
                }).catch(() => {
                })
            }
        }
    }
</script>